<template>
  <div class="view">
    <el-row class="handle-box" :model="filters">
      <span>{{ $t("welllist.wellstate") }}：</span>
      <el-select
        v-model="filters.wellstatus"
        filterable
        :placeholder="$t('welllist.wellstate')"
      >
        <el-option
          v-for="item in optionwellstatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span>{{ $t("welllist.welltype") }}：</span>
      <el-select
        v-model="filters.welltype"
        clearable
        filterable
        :placeholder="$t('welllist.welltype')"
      >
        <el-option
          v-for="item in optionwelltype"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>

      <span>{{ $t("welllist.wellname") }}：</span>
      <el-input
        v-model="filters.searchname"
        :placeholder="$t('public.text')"
        clearable
      ></el-input>
      <el-button class="seacths" type="primary" id="btn" @click="search" icon="el-icon-search"

        >{{ $t("public.search") }}</el-button
      >
    </el-row>

    <div
      class="main srocll"
      :style="
        theme === 'dark'
          ? 'background: #121a32;overflow: auto;height: calc(100% - 80px);'
          : 'background: #ffffff;overflow: auto;height: calc(100% - 80px)'
      "
    >
      <ul>

<div style="padding-left: 15px;font-size: 25px;flex: 1;cursor: pointer;"><i :class="viewqh=='1' ? 'iconfont icon-gengduo' : 'el-icon-menu'" @click="qiehuantuxing"></i></div>
       <li v-for="item in optionwelltype">
          <i
            :class="[
              'iconfont',
              'icon-circle',
              item.value === 1
                ? 'ktcolor'
                : item.value === 2
                ? 'kfcolor'
                : item.value === 3
                ? 'tzcolor'
                : '',
            ]"
          ></i
          ><span>{{ item.label }}</span>
        </li>
      </ul>

      <div id="viewwell" class="jlbbjys">
        <div
          class="grid-content bg-purple"
          v-for="(item, index) in wellList"
          :key="index"
        >
          <div
            style="height: 260px; cursor: pointer"
            @click="jumpurl(item.wellId, item.tableName)"
          >
            <li
              :class="
                item.wellType === '勘探井'
                  ? 'ktBgcolor'
                  : item.wellType === '开发井'
                  ? 'kfBgcolor'
                  : item.wellType === '调整井'
                  ? 'tzBgcolor'
                  : ''
              "
            >
              {{ item.wellId }} <i class="el-icon-sort"></i>
            </li>
            <li
              style="margin: 10px"
              :class="
                item.wellState === 1
                  ? 'tNColor1 bjimage'
                  : item.wellState === 2
                  ? 'tNColor2 bjimage'
                  : item.wellState === 3
                  ? 'tNColor3 bjimage'
                  : item.wellState === 4
                  ? 'tNColor4 bjimage'
                  : item.wellState === 5
                  ? 'tNColor5 bjimage'
                  : item.wellState === 6
                  ? 'tNColor6 bjimage'
                  : 'tNColor7 bjimage'
              "
            >
              {{ item.tableName }}
            </li>
            <img
              :src="
                require('../../assets/WStatus' +
                  (item.wellState === 1
                    ? Math.floor(Math.random() * 2 + 3)
                    : item.wellState === 2
                    ? '1'
                    : item.wellState === 3
                    ? '2'
                    : Math.floor(Math.random() * 2 + 3)) +
                  '.gif')
              "
              alt=""
            />
          </div>
          <div class="text" style="height: 140px">
            <h3 class="colcrzits">
              平台：<span>{{ item.platformName }}</span
              ><i
                class="icons el-icon-star-off"
                @click="icon(item.wid)"
                title="收藏"
                :class="{ 'el-icon-star-on': num.includes(item.wid) }"
              ></i>
            </h3>
            <div style="width: 100%; padding-top: 15px">
              <el-row class="colcrzits">
                <el-col :span="7">
                  <p style="letter-spacing: 6px">井 深：</p>
                </el-col>
                <!-- item.totDepth -->
                <el-col :span="11">
                  <el-progress
                    class="progressr"
                    :percentage="Math.round((item.totDepth / 5000) * 100)"
                    :color="customColorMethod"
                    :format="formats"
                    :stroke-width="12"
                  ></el-progress>
                </el-col>

                <el-col
                  class="wSTxt"
                  :span="6"
                  v-text="item.totDepth + 'M'"
                ></el-col>
              </el-row>
              <el-row class="colcrzits">
                <el-col :span="7">
                  <p style="letter-spacing: 6px">垂 深：</p></el-col
                >
                <!-- item.tvddepth -->

                <el-col :span="11">
                  <el-progress
                    class="progressr"
                    :percentage="Math.round((item.tvdDepth / 5000) * 100)"
                    :color="customColorMethod"
                    :format="formats"
                    :stroke-width="12"
                  ></el-progress>
                </el-col>

                <el-col
                  class="wSTxt"
                  :span="6"
                  v-text="item.tvdDepth + 'M'"
                ></el-col>
              </el-row>
              <el-row class="colcrzits">
                <el-col :span="7"> 钻头深度： </el-col>
                <!-- item.bitDepth -->
                <el-col :span="11">
                  <el-progress
                    class="progressr"
                    :percentage="Math.round((item.bitDepth / 5000) * 100)"
                    :color="customColorMethod"
                    :stroke-width="12"
                    :format="formats"
                  ></el-progress>
                </el-col>

                <el-col
                  class="wSTxt"
                  :span="6"
                  v-text="item.bitDepth + 'M'"
                ></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      
      <div style="width: 100%; display: none" id="tablewell">
        <el-table
         :data="wellList"
         @cell-click="jumptableurl"
         :cell-style="changeCellStyle"
         stripe style="width: 100%;
         height: 100%">
          <el-table-column prop="wellId" :label="$t('dataBoard.wellName')">
          </el-table-column>
          <el-table-column prop="tableName" :label="$t('wellcon.wellLibrary')">
          </el-table-column>
          <el-table-column
            prop="platformName"
            :label="$t('dataBoard.platformName')"
          >
          </el-table-column>
          <el-table-column prop="wellType" :label="$t('welllist.welltype')">
          </el-table-column>
          <el-table-column :label="$t('dataBoard.totDepth')">
            <template slot-scope="scope">
              <p>{{ scope.row.totDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column :label="$t('dataBoard.tvdDepth')">
            <template slot-scope="scope">
              <p>{{ scope.row.tvdDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column :label="$t('dataBoard.bitDepth')">
            <template slot-scope="scope">
              <p>{{ scope.row.bitDepth + "M" }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="wellState" :label="$t('public.wellState')">
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                class="icons el-icon-star-off"
                round
                size="mini"
                @click="icon(scope.row.wid)"
                title="收藏"
                :class="{ 'el-icon-star-on': num.includes(scope.row.wid) }"
                >{{
                  num.includes(scope.row.wid)
                    ? $t("public.collection")
                    : $t("public.Collections")
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "welldata",
  data() {
    return {
      filters: {
        wellstatus: 0,
        wellstate: 0,
        welltype: "",
        searchname: "",
      },
      num: [],

      wellList: [], //井列表
      //井状态
      optionwellstatus: [
        {
          value: 0,
          label: "实时井",
        },
        {
          value: 1,
          label: "历史井",
        },
      ],
      //井类型
      optionwelltype: [
        {
          value: 1,
          label: "勘探井",
        },
        {
          value: 2,
          label: "开发井",
        },
        {
          value: 3,
          label: "调整井",
        },
      ],
      theme: this.$store.state.theme, //主题切换  dark / light
      viewqh: "1",
    };
  },
  computed: {},

  watch: {
    "filters.searchname"(val) {
      if (val.trim() === "") {
        this.getWellData();
      }
    },
    $route(to, from) {
      if (to.name == "welldata" && from.query != to.query) {
        this.getWellData();
        // 对路由变化作出响应...
      }
    },
  },
  mounted() {
    this.getWellData();
  },
  methods: {
    formats(percentage) {
      return "";
    },
    //获取
    async getWellData() {
      try {
        let params = {
          blockname: this.$route.query.menuName,
          usid: JSON.parse(this.$store.state.userInfo).uid,
          state: this.filters.wellstatus,
          welltype: this.filters.welltype,
          wellname: this.filters.searchname,
        };
        let res = await this.$api.welllist.getWD(params);
        if (res.code == 200) {
          this.wellList = res.data;
          this.num = res.data2.map((item) => {
            return item["wid"];
          });
        }
      } catch (e) {
        console.log(e);
      }
    },

    //模糊搜索
    search() {
      this.getWellData();
    },
    //收藏功能
    icon(id) {
      if (this.num.includes(id)) {
        this.num = this.num.filter(function (ele) {
          return ele != id;
        });
      } else {
        this.num.push(id);
      }
      this.wellcoll(id);
    },
    async wellcoll(id) {
      try {
        let params = {
          wellid: id,
          usid: JSON.parse(this.$store.state.userInfo).uid,
        };
        let res = await this.$api.welllist.wellcoll(params);
        this.$notify.success(res.msg);
      } catch (e) {
        console.log(e);
      }
    },
    //点击图标时跳转页面
    jumpurl(wellid, tablename) {
      let params = { WellName: wellid };
      this.$api.set.copymodel(params);
      let routeData = this.$router.resolve({
        path: "/modelmenus",
        query: {
          usid: JSON.parse(this.$store.state.userInfo).uid,
          wellid: wellid, //井Id
          wellname: tablename, //井库名
          specialty: "录井",
        },
      });
      window.open(routeData.href, "_blank");
    },
    //点击Table表格指定单元格时跳转页面
    jumptableurl(row, column, cell, event) {
      let params = { WellName: row.wellId };
      this.$api.set.copymodel(params);
      if (column.property == "wellId") {
        let routeData = this.$router.resolve({
          path: "/modelmenus",
          query: {
            usid: JSON.parse(this.$store.state.userInfo).uid,
            wellid: row.wellId, //井Id
            wellname: row.tableName, //井库名
            specialty: "录井",
          },
        });
        window.open(routeData.href, "_blank");
      }
    },
    //鼠标滑过指定单元格时修改鼠标状态
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.property == "wellId") {
        return "cursor: pointer;";
      }
    },
    //进度条
    customColorMethod(percentage) {
      if (percentage < 20) {
        return "#126fc5";
      } else if (percentage < 40) {
        return "#2ed7ff";
      } else if (percentage < 60) {
        return "#ffe200";
      } else if (percentage < 80) {
        return "#26f129";
      } else {
        return "#ac10d1";
      }
    },
    format(item) {
      return item;
    },
    qiehuantuxing() {
      if (this.viewqh == "1") {
        document.getElementById("tablewell").style =
          "display:block;height: calc(100% - 60px);width: calc(100% - 35px);padding:15px;padding-top:0px";
        document.getElementById("viewwell").style = "display:none";
        this.viewqh = "2";
      } else {
        document.getElementById("tablewell").style = "display:none;width:100%";
        document.getElementById("viewwell").style = "display:block";
        this.viewqh = "1";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  background: #121a32;
  > .jlbbjys {
    height: calc(100% - 60px);
    width: 100%;
    padding: 15px;
    padding-top: 0px;
  }
  > ul {
    height: 36px;
    width: 100%;
    line-height: 36px;
    display: flex;
    justify-content: flex-end;
    background: #121a32;
    border-top: 4px solid #0f162b;
    border-bottom: 4px solid #0f162b;
    .iconfont{
      font-size: 20px;
    }
    li {
      margin: 0 15px;
      i {
        margin-right: 5px;
      }
    }

    .ktcolor {
      color: #b7872f;
    }

    .kfcolor {
      color: #0230ad;
    }

    .tzcolor {
      color: #7025d6;
    }
  }
  .null {
    visibility: hidden;
  }
  > div > div {
    width: 16%;
    height: 380px;
    // background: #ffffff;
    margin: 0px 4px;
    display: inline-block;
    // border: 1px solid #e1edfd;
    margin-bottom: 10px;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      li {
        height: 34px;
        text-align: center;
        line-height: 34px;
        font-weight: bold;
        &:first-child {
          width: 100%;
          font-size: 18px;
          i {
            transform: translateX(20px);
            color: #26f129;
            font-weight: bold;
            font-size: 20px;
          }
        }
        &:nth-child(2) {
          width: 212px;
          font-size: 24px;
          background-image: radial-gradient(#f0f6ff, #f0f6ff);
        }
      }
      .tNColor1 {
        color: #00d188;
        border-radius: 25px;
      }
      .tNColor2 {
        color: #2ed7ff;
        border-radius: 25px;
      }
      .tNColor3 {
        color: #c21dff;
        border-radius: 25px;
      }
      .tNColor4 {
        color: gray;
        border-radius: 25px;
      }
      .tNColor5 {
        color: #ffe200;
        border-radius: 25px;
      }
      .tNColor6 {
        color: #ff8831;
        border-radius: 25px;
      }
      .tNColor7 {
        color: #bfff67;
        border-radius: 25px;
      }
      // img{
      //   background: #0f162a;
      // }
      .ktBgcolor {
        background: #1aafcd;
        border-radius: 25px;
      }
      .kfBgcolor {
        background: #286ece;
        border-radius: 25px;
      }
      .tzBgcolor {
        background: #916ee2;
        border-radius: 25px;
      }
    }
    > div {
      text-align: center;
      display: flex;
      flex-direction: column;
      h3 {
        font-weight: bold;
        margin-top: 6px;
        i {
          transform: translateX(42px);
          font-size: 20px;
          cursor: pointer;
        }
      }
      .el-row {
        font-size: 12px;
        width: 100%;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 10px;
      }
      .wSTxt {
        text-align: right;
        color: #b7872f;
      }
    }
  }
  /deep/.el-progress-bar__outer {
    background-color: #0f162a !important;
  }
}
.progressr {
  line-height: 0;
  position: initial;
  .el-progress-bar {
    padding-right: 0px;
    width: 100%;
    margin-right: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>